<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
			}
			#allmap {
				width: 95%;
				height: 70%;
			}
			#result {
				width: 95%;
			}
		</style>
		<script src="http://api.map.baidu.com/api?v=2.0&ak=GXEKie36h0RwqHQpHPETZCoC"></script>
		<script src="js/jquery-1.7.2.min.js"></script>
		<title>地图</title>
	</head>

	<body>
		<div id="allmap"></div>
		<div>
			<input type="text" id="searchtext" placeholder="关键字搜索">
			<input type="button" value="搜索" onclick="searchb()">
			<input type="text" id="searchstart" placeholder="起点">-<input type="text" id="searchend" placeholder="终点">
			<input type="button" value="检索公交" onclick="tran()">
		</div>
		<div id="result"></div>
	</body>

</html>
<script>
	// 百度地图API功能
	var map = new BMap.Map("allmap"); // 创建Map实例
	map.centerAndZoom(new BMap.Point(113.336131,22.773447), 16); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放（默认关闭）
	map.enableDragging(); // 开启地图拖拽（默认开启）
	/* ----------地图类型、缩略图控件---------- */
	var mapType = new BMap.MapTypeControl({
		//anchor: BMAP_ANCHOR_TOP_LEFT, // 默认右上
		//type: BMAP_MAPTYPE_CONTROL_DROPDOWN,
		mapTypes: [BMAP_NORMAL_MAP, BMAP_PERSPECTIVE_MAP, BMAP_SATELLITE_MAP]
	});
	/*type:
	BMAP_MAPTYPE_CONTROL_HORIZONTAL：水平方式（默认）；
	BMAP_MAPTYPE_CONTROL_DROPDOWN：呈下拉列表方式*/
	/*mapTypes:
	BMAP_NORMAL_MAP：普通地图（默认）；
	BMAP_HYBRID_MAP：混合图（卫星图+路网）（默认）；
	BMAP_SATELLITE_MAP：三维图（默认）；
	BMAP_PERSPECTIVE_MAP：卫星图*/
	var overView = new BMap.OverviewMapControl({
		//anchor: BMAP_ANCHOR_BOTTOM_LEFT // 默认右下
		isOpen: true // 默认关闭
	});
	map.addControl(mapType); // 添加地图类型控件
	map.setCurrentCity("佛山"); // 设置地图显示的城市，此项是必须设置的
	map.addControl(overView); // 添加默认缩略地图控件
	/* ----------工具条、比例尺控件---------- */
	var control = new BMap.ScaleControl({
		anchor: BMAP_ANCHOR_TOP_LEFT // 默认左下
	});
	var navigation = new BMap.NavigationControl({
		//anchor: BMAP_ANCHOR_BOTTOM_RIGHT, // 默认左上
		//type: BMAP_NAVIGATION_CONTROL_ZOOM
		enableGeolocation: true // 启用显示定位（默认关闭）
	});
	/*type:
	BMAP_NAVIGATION_CONTROL_LARGE：完整的平移缩放按钮（默认）；
	BMAP_NAVIGATION_CONTROL_SMALL：小型的平移缩放按钮；
	BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；
	BMAP_NAVIGATION_CONTROL_ZOOM:仅包含小型的缩放按钮*/
	map.addControl(control); // 添加比例尺
	map.addControl(navigation); // 添加缩放平移控件
	/* ----------定位控件---------- */
	var geolocationControl = new BMap.GeolocationControl();
	geolocationControl.addEventListener("locationSuccess", function(e) {
		var address = '';
		address += e.addressComponent.province; // 省
		address += e.addressComponent.city; // 市
		address += e.addressComponent.district; // 区县
		alert('当前定位地址为：' + address);
	}); // 定位成功事件
	geolocationControl.addEventListener("locationError", function(e) {
		//alert(e.message);
	}); // 定位失败事件
	map.addControl(geolocationControl); // 添加定位控件
	/* ----------移除控件---------- */
	//map.removeControl(#);
	/* ----------单击获取点击的经纬度---------- */
	map.addEventListener("click",function(e){
		//alert(e.point.lng + "," + e.point.lat);
	});
	/* ----------搜索---------- */
	var local = new BMap.LocalSearch(map, {
		renderOptions: {
			map: map,
			panel: "result"
		}
	});

	function searchb() {
		var text = $('#searchtext').val();
		if (text != '')
			local.search(text);
	};
	/* ----------公交---------- */
	var transit = new BMap.TransitRoute(map, {
		renderOptions: {
			map: map,
			panel: "result"
		},
		onResultsHtmlSet: function() {
			$("#result").show();
		}
	});

	function tran() {
		var start = $('#searchstart').val();
		var end = $('#searchend').val();
		if (start != '' && end != '')
			transit.search(start, end);
	};
</script>